<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" @click="openPasswordDialog = true">修改密码</el-button>
    </div>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-col :span="8">用户名:</el-col>
          <el-col :span="16">{{ userInfo.user_name }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">用户账号:</el-col>
          <el-col :span="16">{{ userInfo.user_id }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">性别:</el-col>
          <el-col :span="16">{{ userInfo.sex | formatSex }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">用户组:</el-col>
          <el-col :span="16">{{ userInfo.role_id | formatUserGroup }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">系部:</el-col>
          <el-col :span="16">{{ userInfo.depa | formatDepa }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">班级:</el-col>
          <el-col :span="16">{{ userInfo.bmmc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">年级:</el-col>
          <el-col :span="16">{{ userInfo.grade }}<span v-if="userInfo.grade">级</span></el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="openPasswordDialog" title="修改密码" width="30%">
      <el-form ref="pwd" :model="pwd">
        <el-form-item
          :rules="{ required: true, message: '请输入旧密码', trigger: 'blur' }"
          prop="userpwd_old"
          label="旧密码">
          <el-input v-model="pwd.userpwd_old" type="password"/>
        </el-form-item>
        <el-form-item
          :rules="{required: true, message: '请输入新密码', trigger: 'blur', validator: validatePass }"
          prop="userpwd_New"
          label="新密码">
          <el-input v-model="pwd.userpwd_New" type="password"/>
        </el-form-item>
        <el-form-item
          :rules="{ required: true, message: '两次密码不一致', trigger: 'change', validator: validatePass2 }"
          prop="userpwd_Enter"
          label="确认新密码">
          <el-input v-model="pwd.userpwd_Enter" type="password"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleChangePwd">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'md5'
import { updatePwd } from '@/api/user'

export default {
  data() {
    return {
      userInfo: null,
      pwd: {},
      openPasswordDialog: false
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.userInfo = this.$store.getters.userInfo
    },
    handleChangePwd() {
      this.$refs.pwd.validate((valid) => {
        if (!valid) {
          return
        }
        const data = {}
        Object.keys(this.pwd).forEach(k => {
          data[k] = md5(this.pwd[k])
        })
        updatePwd(data).then(res => {
          if (res.code === 200) {
            this.openPasswordDialog = false
            this.$message({ type: 'success', message: '密码更新成功' })
          } else {
            this.$message({ type: 'error', message: res.msg })
          }
        }).catch(() => {})
      })
    },
    validatePass2(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.pwd.userpwd_New) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    },
    validatePass(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.pwd.userpwd_Enter !== '') {
          this.$refs.pwd.validateField('userpwd_Enter')
        }
        callback()
      }
    }
  }
}
</script>

<style scoped>

</style>
